<template>
  <view class="page">
    <view class="topbox">
      <image class="img1" src="../../static/zuo1.png" @click="goback"></image>
      <view class="sousuo">
        <image src="../../static/search.jpg" mode="" class="searchimg"></image>
        <input class="searchinp" type="text" placeholder="搜索更多采摘" />
      </view>
      <image
        class="img2"
        src="../../static/code.png"
        style="width: 40rpx; height: 40rpx; margin-right: 20rpx"
      >
      </image>
      <image
        class="img2"
        src="/static/fx.png"
        style="width: 40rpx; height: 40rpx; margin-right: 20rpx"
      >
      </image>
    </view>

    <view class="msg" @click="buyshow = false">
      <view class="hander">
        <view class="hander_title"> [两大一小]亲子采摘 </view>
        <view class="hander_pjia">
          <text>95%好评</text>
          <text>166条评价</text>
        </view>
        <view class="hander_banner">
          <image
            src="https://img0.baidu.com/it/u=1358990883,3965988984&fm=253&fmt=auto&app=138&f=JPEG"
            mode=""
          ></image>
        </view>
        <view class="hander_price">
          <view class="hander_price1">
            <text class="hander_price2">￥</text>
            <text class="hander_price3">120</text>
            <text class="hander_price4">￥166</text>
          </view>
          <view class="hander_num">
            <view class="hander_num1">本月售</view>
            <view class="hander_num2">200份</view>
          </view>
        </view>
        <view class="hander_msg">
          <view class="">24小时发货·包证绿色有机·无公害无污染</view>
        </view>
      </view>
      <!-- 须知 -->
      <view class="shuoming">
        <view class="shuoming_title">产品详情</view>
        <view class="shuoming_1">
          1、下午四点之前下单,当天采摘发货,下午四点之后,第二天采摘发货
        </view>
        <view class="shuoming_2">
          <image
            class="img"
            src="https://img0.baidu.com/it/u=1358990883,3965988984&fm=253&fmt=auto&app=138&f=JPEG"
            mode=""
          >
          </image>
        </view>
      </view>
    </view>
    <view class="gobuy">
      <view class="img1">
        <image
          class="img"
          src="../../static/tabBar/zhuye2.png"
          mode=""
          @click="gomineindex"
        ></image>
        <image
          class="img"
          src="../../static/tabBar/shoucang.png"
          mode=""
        ></image>
        <image
          class="img2"
          src="../../static/tabBar/xiaoxi1.png"
          mode=""
        ></image>
      </view>
      <view class="gocart">加入购物车</view>
      <view class="goshopping" @click="gobuy">立即购买</view>
    </view>
    <view class="show" v-if="buyshow">
      <view class="price">￥299</view>
      <view class="msg">
        <view class="msg_4">购买须知</view>
        <view class="msg_5">
          <view class="">1、有效期:至2025年1月1日</view>
          <view class="">2、随时退·过期自动退</view>
          <view class="">3、周一至周日均可用,免预约</view>
        </view>
        <view class="msg_4">使用说明</view>
        <view class="msg_5">
          <view class=""
            >1、使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明</view
          >
          <view class=""
            >1、使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明</view
          >
          <view class=""
            >1、使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明</view
          >
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      count: 5,
      count1: 5,
      value: 5,
      value1: 5,
      indicatorDots: true,
      autoplay: true,
      interval: 2000,
      duration: 500,
      buyshow: false,
      activeItem: "tabOne",
      tabs: [
        {
          name: "tabOne",
          label: "共享菜地",
        },
        {
          name: "tabTwo",
          label: "团购",
        },
        {
          name: "tabThree",
          label: "评价",
        },
      ],
      evaluatelist: [
        {
          id: 1,
          name: "李先生",
          time: "2024/4/17",
          url: "https://img0.baidu.com/it/u=2947691987,1330241285&fm=253&fmt=auto&app=138&f=JPEG",
          content: "用户评价用户评价用户评价用户评价用户评价",
          img: [
            "https://img0.baidu.com/it/u=3997658671,3075161792&fm=253&app=138&size=w931&n=0&f=JPEG",
            "https://img0.baidu.com/it/u=3997658671,3075161792&fm=253&app=138&size=w931&n=0&f=JPEG",
            "https://img0.baidu.com/it/u=3997658671,3075161792&fm=253&app=138&size=w931&n=0&f=JPEG",
          ],
        },
        {
          id: 2,
          name: "王先生",
          time: "2024/4/17",
          url: "https://img0.baidu.com/it/u=2947691987,1330241285&fm=253&fmt=auto&app=138&f=JPEG",
          content: "用户评价用户评价用户评价用户评价用户评价",
          img: [
            "https://img0.baidu.com/it/u=3997658671,3075161792&fm=253&app=138&size=w931&n=0&f=JPEG",
            "https://img0.baidu.com/it/u=3997658671,3075161792&fm=253&app=138&size=w931&n=0&f=JPEG",
            "https://img0.baidu.com/it/u=3997658671,3075161792&fm=253&app=138&size=w931&n=0&f=JPEG",
          ],
        },
      ],
    };
  },
  methods: {
    goreview() {
      uni.navigateTo({
        url: "/packageB/productdetails/userevaluation",
      });
    },
    gomineindex() {
      uni.switchTab({
        url: "/pages/mine/index",
      });
    },
    gobuy() {
      this.buyshow = true;
    },
    gogroupbuying() {
      uni.navigateTo({
        url: "/packageB/productdetails/moregroupbuying",
      });
    },
    goback() {
      uni.navigateBack();
    },
    tabClick(item) {
      this.activeItem = item.name;
      // 触发滑动方法
    },
    changeIndicatorDots(e) {
      this.indicatorDots = !this.indicatorDots;
    },
    changeAutoplay(e) {
      this.autoplay = !this.autoplay;
    },
    intervalChange(e) {
      this.interval = e.target.value;
    },
    durationChange(e) {
      this.duration = e.target.value;
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  box-sizing: border-box;
}

.page {
  font-family: "Poppins";
  background-color: #f8f8f8;
  padding-top: 100rpx;
}

.topbox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0rpx 20rpx;
  height: 60rpx;

  .img1 {
    width: 40rpx;
    height: 40rpx;
  }

  .sousuo {
    background-color: #fff;
    flex: 1;
    height: 60rpx;
    margin: 0 40rpx 0 20rpx;
    border-radius: 30rpx;
    display: flex;
    align-items: center;

    .searchimg {
      width: 30rpx;
      height: 30rpx;
      margin-left: 20rpx;
      margin-right: 10rpx;
    }

    .searchinp {
      height: 50rpx;
      font-size: 30rpx;
    }

    ::placeholder {
      color: #bbbbbb;
    }
  }
}

.msg {
  padding: 20rpx 0rpx 100rpx 0rpx;

  h4 {
    margin-bottom: 10rpx;
  }

  .msg_1 {
    display: flex;
    align-items: center;
    font-size: 28rpx;
    margin-bottom: 20rpx;
  }
}

.hander {
  background-color: #fff;
  padding: 20rpx 30rpx;
  border-radius: 40rpx;
  margin-bottom: 30rpx;

  .hander_title {
    font-size: 30rpx;
    font-weight: 600;
    margin-bottom: 10rpx;
  }

  .hander_pjia {
    display: flex;
    justify-content: space-between;
    color: #adadad;
    font-weight: 400;
    font-size: 24rpx;
    margin-bottom: 10rpx;
  }

  .hander_banner {
    margin-bottom: 20rpx;
    height: 500rpx;
    image {
      width: 100%;
      height: 100%;
      border-radius: 30rpx;
    }
  }

  .hander_price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 20rpx;
    border-bottom: 1px solid #d8d8d8;
    margin-bottom: 20rpx;

    .hander_price2 {
      color: #f70f0f;
      font-weight: 600;
      font-size: 30rpx;
    }

    .hander_price3 {
      color: #f70f0f;
      font-weight: 600;
      font-size: 42rpx;
      margin-right: 10rpx;
    }

    .hander_price4 {
      font-size: 22rpx;
      color: #adadad;
      text-decoration: line-through;
    }

    .hander_num1 {
      color: #3d3d3d;
      font-size: 26rpx;
    }

    .hander_num2 {
      color: #8d8683;
      font-size: 24rpx;
    }
  }

  .hander_msg {
    font-size: 28rpx;
    line-height: 32rpx;
  }
}

.shuoming {
  background-color: #fff;
  border-radius: 25rpx;
  padding: 20rpx 30rpx;
  margin-bottom: 20rpx;

  .shuoming_title {
    font-size: 32rpx;
    font-weight: 600;
    margin-bottom: 10rpx;
  }

  .shuoming_1 {
    font-size: 28rpx;
    color: #333333;
    margin-bottom: 10rpx;
  }

  .shuoming_2 {
    font-size: 26rpx;
    color: #adadad;
    line-height: 40rpx;
    height: 500rpx;
    .img {
      width: 100%;
      height: 100%;
      border-radius: 30rpx;
    }
  }
}

.gobuy {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #fff;
  display: flex;
  align-items: center;
  height: 100rpx;

  .img {
    width: 50rpx;
    height: 50rpx;
    margin-right: 28rpx;
  }

  .img2 {
    width: 50rpx;
    height: 50rpx;
    margin-right: 15rpx;
  }

  .img1 {
    flex: 1;
    padding-left: 20rpx;
  }

  .gocart {
    width: 200rpx;
    background: #9a9390;
    border-radius: 40rpx;
    height: 60rpx;
    text-align: center;
    line-height: 60rpx;
    font-size: 30rpx;
    padding: 10rpx 20rpx;
    color: #fff;
    margin-right: 10rpx;
  }

  .goshopping {
    width: 200rpx;
    border-radius: 40rpx;
    height: 60rpx;
    text-align: center;
    line-height: 60rpx;
    font-size: 30rpx;
    padding: 10rpx 20rpx;
    color: #fff;
    margin-right: 10rpx;
    background: #eea427;
  }
}

.show {
  width: 100%;
  background-color: #d66e44;
  border-radius: 30rpx 30rpx 0rpx 0rpx;
  position: fixed;
  left: 0;
  bottom: 100rpx;
  z-index: 555;

  .price {
    color: #fff;
    padding: 20rpx 20rpx;
    font-size: 36rpx;
  }

  .msg {
    background-color: #fff;
    border-radius: 30rpx 30rpx 0rpx 0rpx;
  }

  .msg_1 {
    font-size: 32rpx;
    font-weight: 600;
    margin-bottom: 15rpx;
  }

  .msg_2 {
    display: flex;
    margin-bottom: 15rpx;

    .msg_3 {
      border: 1px solid #bbbbbb;
      margin-right: 20rpx;
      padding: 5rpx 20rpx;
      border-radius: 15rpx;
      background-color: #eaebec;
      color: #000;
    }
  }

  .msg_4 {
    font-size: 32rpx;
    font-weight: 600;
    margin-bottom: 15rpx;
    margin-left: 20rpx;
  }

  .msg_5 {
    font-size: 28rpx;
    padding: 0rpx 20rpx;
  }
}
</style>